﻿<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>葡萄藤PPT</title>

	<link rel="stylesheet" href="../css/reveal/reveal.css">

	<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
	<link rel="stylesheet" href="../css/reveal/theme/ptt.css">

	<!-- syntax highlighting 代码高亮主题 -->
	<link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

	<!-- 打印和PDF输出样式 -->
	<script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
	</script>
	<style>
		.reveal pre code {
			background-color: #120;
		}
		.reveal p{
			font-size: 30px;
		}
	</style>
</head>

<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
	<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
	<div class="slides">
		<section>
			<h4>小课堂【萌新】</h4>
			<h4>【CSS】 哪些css属性可以设置百分比，其计算原则是什么？ </h4>
			<h4>分享人：计翔于</h4>

		</section>
		<section>
			<p>目录</p>
			<p>1.背景介绍</p>
			<p>2.知识剖析</p>
			<p>3.常见问题</p>
			<p>4.解决方案</p>
			<p>5.编码实战</p>
			<p>6.扩展思考</p>
			<p>7.参考文献</p>
			<p>8.更多讨论</p>
		</section>
		<section>
			<section>
				<h3>1.背景介绍</h3>
			</section>
			<section>
				<p>
					CSS 的属性值中经常会出现百分比，并且百分比是实现页面自适应很重要的一种方法。但是有哪些属性可以用百分比来进行设置呢？设置的原则又是什么呢？
				</p>
			</section>
		</section>
		<section>
			<section>
				<h3>2.知识剖析</h3>
			</section>
			<section>
				<p>
					可以使用百分比的样式属性: <br>
					定位：top,right,bottom,left; <br>
					盒模型：height,width,margin,padding, <br>
					背景：background-position,background-size(css3), <br>
					文本：text-indent，<br>
					字体：font-size;
				</p>
			</section>
			<section>
				各个属性使用详细：<br>
				top,right,bottom,left:全兼容,<br>
				height：基于包含它的块级对象的百分比高度。<br>
				width：基于包含它的块级对象的百分比宽度。<br>
				margin：百分数是相对于父元素的 width 计算的。<br>
				padding：百分数是相对于父元素的 width 计算的。


			</section>


		</section>

		<section>
			<section>
				<h3>3.常见问题</h3>
			</section>
			<section>
				<p>
					怎么让字体设置进行自适应？
				</p>
			</section>
		</section>
		<section>
			<section>
				<h3>4.解决方案</h3>
			</section>
			<section>
				<p>
					利用媒体查询和字体的百分比设置。
				</p>
			</section>

		</section>
		<section>
			<section>
				<h3>5.编码实战</h3>
			</section>

			<section>demo</section>

		</section>
		<section>
			<section>
				<h3>6.扩展思考</h3>
			</section>
			<section>
				<p>定位属性的包含块一定是父元素吗？</p>
			</section>
			<section>
				<p>
					绝对定位的包含块 <br>
					<img src="https://ptteng.github.io/PPT/img/CSS-33-CSS%20percentage%20property/page5-1.png" alt="">
					<img src="https://ptteng.github.io/PPT/img/CSS-33-CSS%20percentage%20property/page5-2.png" alt="">
					<br>
					定位属性的百分比的参考系是包含块。关于包含块（containing block）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。但是对于绝对定位的元素，包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。


				</p>
			</section>
			<section>
				<p>
					固定定位的包含块 <br>

					box为父元素，box1为子元素，box2为子元素 <br>

					<img src="../../../AppData/Roaming/Tencent/QQ/Temp/N){V_1ICGI%B~@F%QNNA~0S.png"/>


					<img src="../../../AppData/Roaming/Tencent/QQ/Temp/RWX[MXM6BNAHJ8NLG[4YIF0.png"/></p>
			</section>
		</section>
		<section>
			<section>
				<h3>7.参考文献</h3>
			</section>
			<section>
				<a href="http://blog.csdn.net/hanangjie/article/details/50351442">CSS样式的设置</a> <br>
				<a href="http://www.mamicode.com/info-detail-1315056.html">CSS 属性之中经常出现的百分比</a> <br>
				<a href="http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp">W3School</a>
			</section>

			</section>
		<section>
			<section>
				<h3>8.更多讨论</h3>
			</section>
			<section>
				<p>
				</p>
			</section>
		</section>
		<section>
			<h4>鸣谢</h4>
			<p>感谢大家观看</p>
			<p>
				By
				<small style="vertical-align: middle">计翔于</small>
			</p>
		</section>
	</div>
</div>
<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>
<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [{
            src: '../plugin/markdown/marked.js'
        },
            {
                src: '../plugin/markdown/markdown.js'
            },
            {
                src: '../plugin/notes/notes.js',
                async: true
            },
            {
                src: '../plugin/highlight/highlight.js',
                async: true,
                callback: function() {
                    hljs.initHighlightingOnLoad();
                }
            }
        ]
    });
</script>
</body>

</html>